import React from 'react'

import { Flex } from 'antd-mobile'

import styles from './index.module.css'

// 条件筛选栏标题数组：
const titleList = [
  { id: 1,title: '区域',cols: 3, type: 'area' },
  { id: 2,title: '方式',cols: 1, type: 'rent' },
  { id: 3,title: '租金',cols: 1, type: 'price' },
  { id: 4,title: '筛选',cols: 0, type: 'more' }
]
export default function FilterTitle({ callback,activeIndex }) {
  return (
    <Flex align="center" className={styles.root}>
      {titleList.map(item => {
        // item.type => 'area'
        // const isSelected = titleSelectedStatus[item.type]
        return (
          <Flex.Item key={item.id} onClick={() => callback(item)}>
          {/* 选中类名： selected */}
          <span className={[styles.dropdown,activeIndex === item.id ? styles.selected : ''].join(' ')}>
            <span> {item.title}</span>
            <i className="iconfont icon-arrow" />
          </span>
        </Flex.Item>
       )
        })}
    </Flex>
  )
}
